<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            *{margin:0;
    }
    .roundTableTitle{
        width: 1100px;
        height: 100%;
        position: relative;
        left: 50%;
        margin-left: -570px;
        background-color: white;
        margin-top: 25px;
    }
    .roundTitle{
        width: 1080px;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        font-size: 20px;
        font-family: 黑体;
        border-bottom: 1px solid #ccc;
    }
    .roundContent{
        width: 1100px;
        height: 100%;
    }
    #roundUl{
        list-style: none;
        width: 1100px;
        height: 1000px;
        padding-inline-start: 0px;
        padding-left: 25px;
    }
    #roundUl>li{
        width: 200px;
        height: 250px;
        float: left;
        margin: 30px;

    }
    #roundUl>li>img{
        width: 200px;
        height: 200px;
        border-radius:5%;
    }
    .roundName{
        position: relative;
        top: -30px;
        color: white;
        
    }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            var Random = Mock.Random
        Mock.mock("http://localhost:5500/api/getAllUsers",function(){
        var result = []
        for(var i=0;i<6;i++){
            var journalism = Mock.mock({
                'title':Random.csentence(5,10),
                'content':Random.cparagraph(30),
                 "wordList|1-10000":100,
                 "filterCount|1-4000000":100000,
                 "readCount|1-80000000":200000

            })
            result.push(journalism)
        }
        return result  
    })
            $.getJSON("JSON/roundTable.json",function(result){
                console.log(result)
                var strHtml=''
                for(var i=0;i<result.length;i++){
                    strHtml+=`
                    <li onclick="sendmail(this)">
                    <img src="${result[i].banner}">
                    <p class="roundName">${result[i].name}</p>
                    <p class="roundName" style="color: black; top: -20px; padding-left: 5px;">该圆桌被浏览80.3万次</p>
                </li>`
                }
                $('#roundUl').html(strHtml)
            })
        })
        var roundInfo=[]
        function sendmail(that){
            console.log(that.firstElementChild.nextElementSibling.innerHTML)
            var roundImg = that.firstElementChild.src
            var roundName = that.firstElementChild.nextElementSibling.innerHTML
            roundInfo.push({"roundImg":roundImg,"roundName":roundName})
            sessionStorage['roundInfo'] = JSON.stringify(roundInfo)
            location.href = "roundTable_content.html"
        }
    </script>
</head>
<body>
        <!-- 通栏 -->
        <div id="Navigation"></div>

        <div class="roundTableTitle">
        <div class="roundTitle">
            <span>圆桌</span>
        </div>
        <div class="roundContent">
            <ul id="roundUl">
                <li>
                    <img src="https://pic3.zhimg.com/50/v2-70571dd7fd6908102b930ddb554e558b_720w.jpg?source=b1f6dc53">
                    <p class="roundName">上海插班生考试概况</p>
                    <p class="roundName" style="color: black; top: -20px; padding-left: 5px;">该圆桌被浏览80.3万次</p>
                </li>
                <li></li>
            </ul>
        </div>
        </div>
        <script>
            $("#Navigation").load("Navigation.html");
        </script>
</body>
</html>